<template>
	<view class="content">
		<!-- 优惠 -->
		<view class="youhui-out" v-if="youhui">
			<view class="youhui">
				<view class="youhui-tittle">优惠券</view>
				<view class="youhui-isUsable">
					<view class="youhui-isUsable-boxs" @tap="changeType(1)" :class="youhuiType == 1 ? 'youhui-isUsable-boxs-active' : ''">可用优惠券(3)<view
						 v-if="youhuiType == 1"></view>
					</view>
					<view class="youhui-isUsable-boxs" @tap="changeType(2)" :class="youhuiType == 2 ? 'youhui-isUsable-boxs-active' : ''">不可用优惠券(2)<view
						 v-if="youhuiType == 2"></view>
					</view>
				</view>
				<view class="youhui-tips">您已选中优惠券2张，共可抵用<a>￥160.00</a></view>
				<view class="youhuiquan-list">
					<view class="youhui-items">
						<view class="youhui-items-l">
							<view class="youhui-items-price"><a>￥</a>80</view>
							<view class="youhui-items-text">满299元可用</view>
							<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/quan_blue%402x.png" class="youhui-items-bg"></image>
						</view>
						<view class="youhui-items-r">
							<view class="youhui-items-name"><span>平台券</span>适用于全平台商品，特殊商品除外</view>
							<view class="youhui-items-date">2019.01.16-2019.01.16</view>
							<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/xuanzhong%402x.png" @tap="xuanOne()" v-if="xuanzhongOne&&youhuiType==1"></image>
							<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/weixuanzhong%402x.png" @tap="xuanOne()" v-if="!xuanzhongOne&&youhuiType==1"></image>
						</view>
					</view>
					<view class="youhui-items">
						<view class="youhui-items-l">
							<view class="youhui-items-price"><a>￥</a>80</view>
							<view class="youhui-items-text">满299元可用</view>
							<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/quan_blue%402x.png" class="youhui-items-bg"></image>
						</view>
						<view class="youhui-items-r">
							<view class="youhui-items-name"><span>平台券</span>适用于全平台商品，特殊商品除外</view>
							<view class="youhui-items-date">2019.01.16-2019.01.16</view>
							<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/xuanzhong%402x.png" @tap="xuanTwo()" v-if="xuanzhongTwo&&youhuiType==1"></image>
							<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/weixuanzhong%402x.png" @tap="xuanTwo()" v-if="!xuanzhongTwo&&youhuiType==1"></image>
						</view>
					</view>


					<view class="youhui-items" v-if="youhuiType==1" :class="youhuiquanNo == false ? 'margin-b':''">
						<view class="youhui-items-l" :class="youhuiquanNo == false ? 'youhui-items-l-no' : ''">
							<view class="youhui-items-price"><a>￥</a>50</view>
							<view class="youhui-items-text">满199元可用</view>
							<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/quan_blue%402x.png"  v-if="youhuiquanNo == true" class="youhui-items-bg"></image>
							<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/quan_gray%402x.png"  v-if="youhuiquanNo == false" class="youhui-items-bg"></image>
						</view>
						<view class="youhui-items-r">
							<view class="youhui-items-name"><span :class="youhuiquanNo == false ? 'youhui-items-l-no' : ''">平台券</span>适用于全平台商品，特殊商品除外</view>
							<view class="youhui-items-date">2019.01.16-2019.01.16</view>
							<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/weixuanzhong%402x.png"></image>
						</view>
						<view class="youhui-no-text" v-if="youhuiquanNo == false">不可与已勾选券叠加使用</view>
					</view>


				</view>
				<view class="youhuiquan-btn" @tap="showYouhui()">确定</view>
			</view>
		</view>

		<!-- 无地址 -->
		<view class="address-add" v-if="!dizhi">
			<image class="address-add-img" src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/addition_fill%402x.png"></image>
			<view class="address-add-text">添加新地址</view>
			<image class="address-add-icon" src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/shop_you%402x.png"></image>
			<image class="address-add-bottom" src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/xinfengtiao%402x.png"></image>
		</view>
		<!-- 有地址 -->
		<view class="address-add" v-if="dizhi">
			<image class="address-img" src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/shouhuodizhi%402x.png"></image>
			<view class="address-infos">
				<view class="address-userinfos">张晓明<a>199****2345</a></view>
				<view class="address-addresstext">浙江省杭州市西湖区玉古路188号现代国际大厦</view>
			</view>
			<image class="address-add-icon" src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/shop_you%402x.png"></image>
			<image class="address-add-bottom" src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/xinfengtiao%402x.png"></image>
		</view>

		<!-- 商品 -->
		<view class="goods-infos">
			<!-- 商品标题 -->
			<view class="goods-infos-tittle">现代科技</view>
			<!-- 商品信息 -->
			<view class="goods-boxs">
				<image src="https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/no_img.png"></image>
				<view class="goods-boxs-infos">
					<view class="goods-boxs-tittle">冬季加厚保暖珊瑚绒四件套双面绒…<a>x1</a></view>
					<view class="goods-boxs-size">蓝色2.0M床单式 被套20…</view>
					<view class="goods-boxs-price">¥200+10U点</view>
				</view>
			</view>
			<view class="goods-boxs">
				<image src="https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/no_img.png"></image>
				<view class="goods-boxs-infos">
					<view class="goods-boxs-tittle">冬季加厚保暖珊瑚绒四件套双面绒…<a>x1</a></view>
					<view class="goods-boxs-size">蓝色2.0M床单式 被套20…</view>
					<view class="goods-boxs-price">¥200</view>
				</view>
			</view>
		</view>

		<!-- 商品优惠及支付方式 -->
		<view class="goods-buy">
			<view class="goods-buy-items goods-buy-items-line" @tap="showYouhui()">
				<view class="goods-buy-items-name">优惠券</view>
				<view class="goods-buy-items-detail">1张可用</view>
				<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/shop_you%402x.png"></image>
			</view>
			<view class="goods-buy-items">
				<view class="goods-buy-items-name">支付方式</view>
				<view class="goods-buy-items-detail">现金+U点</view>
				<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/shop_you%402x.png"></image>
			</view>
		</view>

		<!-- 商品价格信息 -->
		<view class="goods-priceinfos">
			<view class="goods-priceinfos-items">
				<view class="goods-priceinfos-items-l">商品总价</view>
				<view class="goods-priceinfos-items-r">￥400+10U点</view>
			</view>
			<view class="goods-priceinfos-items">
				<view class="goods-priceinfos-items-l">运费</view>
				<view class="goods-priceinfos-items-r">￥0.00</view>
			</view>
			<view class="goods-priceinfos-items">
				<view class="goods-priceinfos-items-l">优惠</view>
				<view class="goods-priceinfos-items-r">￥0.00</view>
			</view>
			<view class="goods-priceinfos-items">
				<view class="goods-priceinfos-items-l"><a>合计</a></view>
				<view class="goods-priceinfos-items-r"><a>￥400+100MGT</a></view>
			</view>
		</view>

		<!-- 合同 -->
		<view class="order-agree">提交该订单表示您已经同意<a>《用户购买协议》</a></view>

		<!-- 提交订单 -->
		<view class="goods-jiesuan">
			<view class="goods-heji">总计：<a>￥{{totalPrice}}</a></view>
			<view class="goods-jiesuan-button" @tap="goPay()">提交订单</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				totalPrice: '400+10U点',
				dizhi: true,
				youhui: false,
				youhuiType: 1,
				youhuiquanNo: true,
				xuanzhongOne: false,
				xuanzhongTwo: false,
			}
		},
		onLoad() {

		},
		methods: {
			goPay() {
				uni.navigateTo({
					url: '../goods-pay/goods-pay'
				})
			},
			showYouhui() {
				this.youhui = !this.youhui
			},
			changeType(index) {
				this.youhuiType = index
			},
			xuanOne() {
				this.xuanzhongOne = !this.xuanzhongOne
			},
			xuanTwo() {
				this.xuanzhongTwo = !this.xuanzhongTwo
				this.youhuiquanNo = !this.youhuiquanNo
			}
		}
	}
</script>

<style>
	page {
		background: rgba(245, 245, 245, 1);
	}

	.content {
		width: 100%;
		height: 100%;
	}

	.address-add {
		margin: 10px 10px 0px 10px;
		height: 73px;
		display: flex;
		flex-wrap: wrap;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 4px 12.5px 0px rgba(153, 153, 153, 0.1);
		border-radius: 4px;
	}

	.address-add-img {
		width: 20px;
		height: 20px;
		margin: 26.5px 10px;
	}

	.address-img {
		width: 17.5px;
		height: 17.5px;
		margin: 17.5px 7.5px 38px 10px;

	}

	.address-add-text {
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		height: 73px;
		line-height: 73px;
	}

	.address-infos {
		position: absolute;
		left: 45px;
		height: 73px;
	}

	.address-userinfos {
		height: 21px;
		font-size: 15px;
		font-family: PingFangSC-Medium, PingFangSC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		line-height: 21px;
		margin-top: 15px;
		display: flex;
	}

	.address-userinfos a {
		margin-left: 12px;
	}

	.address-addresstext {
		margin-top: 6px;
		height: 15px;
		font-size: 11px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 15px;
	}

	.address-add-icon {
		width: 8px;
		height: 13px;
		margin-top: 30px;
		position: absolute;
		right: 20px;
	}

	.address-add-bottom {
		height: 1px;
		position: relative;
		bottom: 0;
		width: 99%;
		left: 0.5%;
	}

	.goods-infos {
		height: 100%;
		margin: 10px;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 4px 12.5px 0px rgba(153, 153, 153, 0.1);
		border-radius: 5px;
	}

	.goods-infos-tittle {
		height: 21px;
		font-size: 15px;
		font-family: PingFangSC-Medium, PingFangSC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		line-height: 21px;
		margin: 10px;
		padding-top: 10px;
	}

	.goods-boxs {
		height: 100%;
		padding: 0 10px 10px 10px;
		display: flex;
		flex-wrap: wrap;
	}

	.goods-boxs image {
		width: 77px;
		height: 77px;
		margin-right: 6px;
	}

	.goods-boxs-infos {
		height: 77px;
		position: absolute;
		left: 103px;
		right: 10px;
	}

	.goods-boxs-tittle {
		height: 16.5px;
		font-size: 11px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 16.5px;
		width: 100%;
	}

	.goods-boxs-tittle a {
		position: absolute;
		right: 10px;
	}

	.goods-boxs-size {
		height: 15px;
		height: 15px;
		font-size: 11px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		line-height: 15px;
		margin-top: 2px;
		margin-bottom: 10px;
	}

	.goods-boxs-price {
		height: 18px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(254, 67, 56, 1);
		line-height: 18px;
	}

	.goods-buy {
		height: 100%;
		margin: 0 10px 10px 10px;
		background: rgba(255, 255, 255, 1);
		border-radius: 5px;
	}

	.goods-buy-items {
		height: 50px;
		margin: 0 0 0 10px;
		display: flex;
		flex-wrap: wrap;
	}

	.goods-buy-items-name {
		height: 50px;
		font-size: 12px;
		font-family: PingFangSC-Medium, PingFangSC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		line-height: 50px;
	}

	.goods-buy-items-detail {
		height: 50px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 50px;
		position: absolute;
		right: 35px;
	}

	.goods-buy-items image {
		width: 10px;
		height: 10px;
		margin-top: 20px;
		position: absolute;
		right: 20px;
	}

	.goods-buy-items-line {
		border-bottom: 1px solid #E5E5E5;
	}

	.goods-priceinfos {
		margin: 0 10px 10px 10px;
		background: rgba(255, 255, 255, 1);
		border-radius: 5px;
		height: 100%;
		padding: 10px;
	}

	.goods-priceinfos-items {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		padding-top: 6px;
	}

	.goods-priceinfos-items-l {
		height: 16.5px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		line-height: 16.5px;
	}

	.goods-priceinfos-items-l a {
		font-size: 14px;
		height: 20px;
	}

	.goods-priceinfos-items-r {
		height: 16.5px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 16.5px;
		position: absolute;
		right: 20px;
	}

	.goods-priceinfos-items-r a {
		height: 20px;
		font-size: 14px;
		color: rgba(254, 67, 56, 1);
	}

	.order-agree {
		margin: 10px;
		height: 15px;
		font-size: 11px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		line-height: 15px;
		display: flex;
	}

	.order-agree a {
		color: #3E86FF;
	}

	.goods-jiesuan {
		width: 100%;
		height: 55px;
		background: rgba(255, 255, 255, 1);
		display: flex;
		position: fixed;
		bottom: 0;
		z-index: 100;
	}

	.goods-heji {
		height: 55px;
		line-height: 55px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		position: absolute;
		right: 145px;
		display: flex;
	}

	.goods-heji a {
		font-size: 14px;
		font-weight: 500;
		color: rgba(254, 67, 56, 1);
	}

	.goods-jiesuan-button {
		width: 115px;
		height: 40px;
		text-align: center;
		font-size: 14px;
		font-family: PingFangSC-Medium, PingFangSC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		line-height: 40px;
		background: rgba(254, 67, 56, 1);
		border-radius: 2px;
		position: absolute;
		right: 20px;
		top: 7.5px;
	}

	.youhui-out {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0px;
		background: rgba(0, 0, 0, 0.7);
		z-index: 200;
	}

	.youhui {
		width: 100%;
		height: 550px;
		background: rgba(255, 255, 255, 1);
		position: absolute;
		bottom: 0;
	}

	.youhui-tittle {
		width: 100%;
		height: 25px;
		line-height: 25px;
		padding-top: 15px;
		padding-bottom: 5px;
		padding-left: 12px;
		font-size: 18px;
		font-family: PingFangSC-Medium, PingFangSC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	}

	.youhui-isUsable {
		width: 100%;
		height: 45px;
		display: flex;
	}

	.youhui-isUsable-boxs {
		width: 50%;
		height: 45px;
		text-align: center;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		line-height: 45px;
		position: relative;
	}

	.youhui-isUsable-boxs-active {
		color: rgba(51, 51, 51, 1);
	}

	.youhui-isUsable-boxs view {
		background: rgba(254, 153, 0, 1);
		position: absolute;
		bottom: 0;
		height: 2px;
		left: 50px;
		right: 50px;
	}

	.youhui-tips {
		width: 100%;
		height: 30px;
		background: rgba(255, 243, 220, 1);
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		line-height: 30px;
		padding-left: 10px;
	}

	.youhui-tips a {
		color: #FF3B30;
	}

	.youhui-items {
		height: 90px;
		margin: 10px 10px 0 10px;
		display: flex;
		position: relative;
	}

	.youhui-items-r image {
		height: 30px;
		width: 30px;
		position: absolute;
		right: 5px;
		top: 30px;
	}

	.youhui-items-l {
		width: 112.5px;
		height: 90px;
		z-index: 300;
		position: relative;
	}
	
	.youhui-items-bg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.youhui-items-price {
		width: 100%;
		line-height: 40px;
		padding-top: 13px;
		font-size: 40px;
		font-family: PingFangSC-Semibold, PingFangSC;
		font-weight: 600;
		color: rgba(255, 255, 255, 1);
		display: flex;
		justify-content: center;
		position: absolute;
		z-index: 600;
	}

	.youhui-items-price a {
		font-size: 20px;
		width: 18px;
		text-align: center;
		line-height: 40px;
	}

	.youhui-items-text {
		font-size: 11px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		position: absolute;
		top: 58.5px;
		z-index: 600;
		left: 24.5px;
	}

	.youhui-items-r {
		height: 90px;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 1px 5px 0px rgba(153, 153, 153, 0.1);
		border: 1px solid rgba(246, 246, 246, 1);
		display: flex;
		position: absolute;
		width: 100%;
	}

	.youhui-items-name {
		height: 40px;
		font-size: 12px;
		font-family: PingFangSC-Medium, PingFangSC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		margin-right: 18px;
		position: absolute;
		left: 122.5px;
		line-height: 20px;
	}

	.youhui-items-name span {
		width: 92px;
		padding: 0 6.5px;
		margin-right: 10px;
		height: 14px;
		border-radius: 7px;
		line-height: 14px;
		background: rgba(99, 157, 236, 1);
		font-size: 10px;
		font-family: PingFangSC-Medium, PingFangSC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
	}

	.youhui-items-date {
		position: absolute;
		font-size: 9px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		bottom: 29px;
		left: 122.5px;
	}

	.youhui-no-text {
		position: absolute;
		bottom: -27.5px;
		margin-top: 27.5px;
		line-height: 27.5px;
		font-size: 11px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		background:rgba(244,244,244,1);
		padding-left: 10px;
		left: 0;
		right: -2px;
	}

	.youhuiquan-btn {
		height: 35px;
		position: absolute;
		right: 56px;
		left: 56px;
		bottom: 15px;
		background: rgba(254, 67, 56, 1);
		border-radius: 21px;
		text-align: center;
		font-size: 14px;
		line-height: 35px;
		font-family: PingFangSC-Medium, PingFangSC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
	}
	.margin-b {
		margin-bottom: 27.5px;
	}
</style>
